<template>
  <div id="lightController" class="wrapper" style="overflow-x: auto">
    <!--搜索-->
    <div class="mb-3 d-flex align-items-center" style="min-width: 975px;">
      <div class="d-flex align-items-center">
        <!--<el-input placeholder="请输入内容"  class="input-with-select w400"  size="small" v-model="searchTxt">-->
        <!--<el-select class="w140" v-model="searchType" slot="prepend" placeholder="请选择" @change="querLightInfo">-->
        <!--<el-option label="控制箱" :value="1"></el-option>-->
        <!--<el-option label="RUT单灯分组" :value="2"></el-option>-->
        <!--<el-option label="RTU单灯" :value="3"></el-option>-->
        <!--</el-select>-->
        <!--<el-button  slot="append"  class="ur-btn ur-btn-primary" @click="querLightInfo"><i class="iconfont icon-sousuo"></i>查询</el-button>-->
        <!--</el-input>-->
        查询类型：
        <el-select @change="querLightInfo" class="w130 mr-2" placeholder="请选择" size="small" v-model="searchType">
          <el-option :value="3" label="RTU"></el-option>
          <el-option :value="2" label="RTU单灯"></el-option>
          <el-option :value="1" label="RTU单灯分组"></el-option>
        </el-select>
        <template v-if="searchType==2||searchType==3">
          责任区：
          <el-select class="w120 mr-2" v-model="pole.regionId" slot="prepend" placeholder="请选择" size="small"  @change="querLightInfo">
            <el-option label="全部" :value="-1"></el-option>
            <el-option v-for="(item,index) in regions" :key="index" :label="item.Name" :value="item.Id"></el-option>
          </el-select>
        </template>
        <!--<template v-if="searchType==1">
          分组：
          <el-select class="w140 mr-2" v-model="pole.groupId" slot="prepend" placeholder="请选择" size="small" @change="querLightInfo">
            <el-option label="全部" :value="-1"></el-option>
            <el-option v-for="(item,index) in groups" v-if="item.Type==2" :key="index" :label="item.GroupName" :value="item.Id"></el-option>
          </el-select>
        </template>-->
        <el-input placeholder="请输入内容"  class="input-with-select w180"  size="small" v-model="pole.value">
          <el-button v-if="limits.indexOf('2_06_02_01')!=-1" slot="append"  class="ur-btn ur-btn-primary" @click="querLightInfo">查询</el-button>
        </el-input>

        <!--showLightOnOff=true-->
        <el-button v-if="limits.indexOf('2_06_02_02')!=-1||limits.indexOf('2_06_02_03')!=-1" class="ur-btn ur-btn-primary w120 ml-2" @click="onOffLight"><i class="iconfont icon-dankong"></i>开关灯调光</el-button>
      </div>
      <ul class="result_group ml-auto ">
        <li>下发总计：{{callNum.total}}</li>
        <li><i class="circle success"></i>成功：{{callNum.success}}</li>
        <li><i class="circle error"></i>失败：{{callNum.error}}</li>
      </ul>
    </div>
    <!--表格-->
    <el-table ref="ligthTable" :data="getGidData" style="min-width: 975px;" :height="clientHeight-202" highlight-current-row @selection-change="selsChange">
      <el-table-column type="selection" width="50" align="center"></el-table-column>
      <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
      <!--RTU单灯-->
      <template v-if="searchType==2">
        <el-table-column v-for="(v,index) in columns[1]" :prop="v.field" :label="v.title" :width="v.width" align="center" :key="index">
          <template slot-scope="scope">
            <span v-if="v.field=='result'">
              <template v-if="scope.row[v.field]===1"><i class="circle success"></i>成功</template>
              <template v-else-if="scope.row[v.field]===0"><i class="circle error"></i>失败</template>
              <template v-else></template>
            </span>
            <span v-else>{{scope.row[v.field]}}</span>
          </template>
        </el-table-column>
      </template>
      <!--RTU-->
      <template v-else-if="searchType==3" >
        <el-table-column align="center" prop="No" label="控制箱编号" width="120"></el-table-column>
        <el-table-column align="center" prop="Manufacturer" label="设备厂家" width="140"></el-table-column>
        <el-table-column align="center" prop="DevAddr" label="设备地址" width="160"></el-table-column>
        <el-table-column align="center" prop="AreaName" label="责任区" width="140"></el-table-column>
        <el-table-column align="center" prop="Location" label="安装地点"></el-table-column>
        <el-table-column align="center" prop="opereaTime" label="执行时间" width="160"></el-table-column>
        <el-table-column align="center" prop="result" label="下发结果" :key="'rtu_result'+Math.random()">
          <template slot-scope="scope">
            <template v-if="scope.row.result===1"><i class="circle success" ></i>成功</template>
            <template v-else-if="scope.row.result===0"><i class="circle error" ></i>失败</template>
            <template v-else>{{scope.row.result}}</template>
          </template>
        </el-table-column>
        <el-table-column prop="resultInfo" label="失败原因" :key="'rtu_resultInfo'+Math.random()"></el-table-column>
      </template>
      <!--分组-->
      <template  v-else>
        <el-table-column align="center" prop="GroupName" label="分组名称"></el-table-column>
        <el-table-column align="center" prop="opereaTime" label="执行时间"></el-table-column>
        <el-table-column align="center" prop="result" label="下发结果" :key="'group_result'+Math.random()">
          <template slot-scope="scope">
            <template v-if="scope.row.result===1"><i class="circle success" ></i>成功</template>
            <template v-else-if="scope.row.result===0"><i class="circle error" ></i>失败</template>
            <template v-else>{{scope.row.result}}</template>
          </template>
        </el-table-column>
        <el-table-column prop="resultInfo" label="失败原因" :key="'group_resultInfo'+Math.random()"></el-table-column>
      </template>
    </el-table>
    <!--分页-->
    <div class="my-3 d-flex justify-content-between align-items-center">
      <div class="" >
        <label>下发结果：</label>
        <div class="progress  w200 d-inline-block" style="height: 16px;vertical-align: middle">
          <div ref="progressBar" class="progress-bar progress-bar-striped" role="progressbar" style="width:0" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
      </div>
      <el-pagination class=" " @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[100,200,500,1000]" :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>
    </div>
    <!--开关灯调光弹框-->
    <el-dialog v-el-drag-dialog title="单灯控制" :visible.sync="showLightOnOff" width="516px" top="12%" @close="showLightOnOff=false">
      <template v-if="showLightOnOff">
        <light-ctrl :poles="sels" :monitorMode="monitorMode" :lightType="lightType" @updateResult="updateResult" @updateBar="updateBar"></light-ctrl>
      </template>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import {mapState} from 'vuex'
  import api from 'api/api'
  import fetch from 'api/fetch'
  import elDragDialog from 'directive/el-dragDialog'
  import lightCtrl from './light-controller'

  export default {
    directives:{elDragDialog},
    components: {
      lightCtrl
    },
    props: {},
    data() {
      return {
        total: 0,
        currentPage: 1,
        pageSize:100,
        searchType:2,
        searchTxt:"",
        tables: {
          sel: null,//选中行
          columns: [],
          data: []
        },
        columns:[
          [
            {field: "GroupName", title: "分组名称", width: null},
            {field: "opereaTime", title: "执行时间", width: null},
            {field: "result", title: "下发结果", width: null},
            {field: "resultInfo", title: "失败原因", width: null},
          ],
          [
            {field: "PoleNo", title: "灯杆编号", width: '120'},
            {field: "BoxNo", title: "所属控制箱", width: null},
            {field: "PoleDevAddr", title: "设备地址", width: null},
            {field: "AreaName", title: "责任区", width: null},
            {field: "opereaTime", title: "执行时间", width: null},
            {field: "result", title: "下发结果", width: null},
            {field: "resultInfo", title: "失败原因", width: null},
          ],
          [
            {field: "No", title: "控制箱编号", width: '120'},
            {field: "Manufacturer", title: "设备厂家", width: '140'},
            {field: "DevAddr", title: "设备地址", width: '160'},
            {field: "AreaName", title: "责任区", width: '140'},
            {field: "Location", title: "安装地点", width: null},
            {field: "opereaTime", title: "执行时间", width: '160'},
            {field: "result", title: "下发结果", width: null},
            {field: "resultInfo", title: "失败原因", width: null},
          ]
        ],
        showLightOnOff:false,
        regions:[],
        groups:[],
        pole:{regionId:-1,groupId:-1,value:''},//channelMode:1,
        callNum:{total:0,success:0,error:0},
        sels:[],
        PoleIds:[],
        lightType:'rtu',
        monitorMode:0
      }
    },
    watch: {
      searchType(val){
        this.monitorMode=0
        if(val==1){//分组
          this.lightType='rtu_group'
          this.pole.regionId=-1
        }else{
          this.lightType='rtu'
          if(val==3){
            this.monitorMode=1
          }
          this.pole.groupId=-1
        }
      }
    },
    computed: {
      getGidData(){
        if(this.tables.data.length){
          return this.tables.data.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        }
      },
      ...mapState({
        clientHeight:state=>state.comm.clientHeight,
        clientWidth:state=>state.comm.clientWidth,
        limits:state=>state.user.userInfo.limits
      })
    },
    methods: {
      indexMethod(index) {
        return index + 1
      },
      selsChange(sels) {
        if(!sels.length) return
        this.PoleIds=[]
        this.sels = sels
        sels.map(pole=>{
          this.PoleIds.push(pole.PoleId||pole.Id||pole.BoxId)
        })
        this.sels.splice(0,0)
      },
      querLightInfo(){
        this.currentPage=1
        let url,data
        if(this.searchType==1){//分组
          // this.columns=this.tables.columns[0]
          if(this.limits.indexOf('2_06_02_04')==-1) return this.$message.error({showClose:true,message:'该用户无权限操作'})
          url='/Manual/QueryRtuLightByGroup'
          //groupId:this.pole.groupId==-1?null:this.pole.groupId,
          data={value:this.pole.value}
        }else if(this.searchType==2){//RTU单灯
          if(this.limits.indexOf('2_06_02_01')==-1) return this.$message.error({showClose:true,message:'该用户无权限操作'})
          // this.columns=this.tables.columns[1]
          url='/Manual/QueryRtuLightCtlInfo'
          data=this.pole
        }else{//RTU(装单灯)
          url='/Manual/QueryRtuCtlInfo'
          data={regionId:this.pole.regionId,groupId:-1,value:this.pole.value,monitorMode:1}
        }
        api.fetchSimple(url,data)
            .then(r => {
              if(r.data.length){
                this.tables.data = r.data
                this.total=r.data.length
              }else{
                // this.$message.success('未查询到数据')
                this.tables.data=[]
                this.total=0
              }
            })
      },
      handleSizeChange(val) {
        this.pageSize=val
      },
      handleCurrentChange(val) {
        this.currentPage=val
      },
      queryRegion(){
        fetch.queryArea()
            .then(r=>{
              this.regions=r.data
            })
      },
      queryGroup(){
        this.groups=[]
        fetch.queryGroup()
            .then(r=>{
              this.groups=r.data
            })
      },
      onOffLight(){
        if(!this.sels.length){
          if(this.searchType==2){
            return this.$message.warning({showClose:true,message:'请勾选RTU单灯'})
          }else{
            return this.$message.warning({showClose:true,message:'请勾选RTU单灯分组'})
          }
        }
        this.showLightOnOff=true
        this.clearResult(this.PoleIds,'start')
      },
      updateResult(v) {
        this.callNum = v.callNum
        this.clearResult(v.PoleIds,'end')
      },
      updateBar(pcen){//更新进度条宽度
        this.$refs.progressBar.style.width = pcen + '%'
        this.$refs.progressBar.textContent = pcen + '%'
      },
      clearResult(PoleIds,type){
        this.$refs.ligthTable.clearSelection()
        this.tables.data.forEach(pole => {
          let index=PoleIds.indexOf((pole.PoleId||pole.Id||pole.BoxId))
          if (index != -1) this.$refs.ligthTable.toggleRowSelection(pole)
          if(type=='start'){//操作前清空结果
            this.callNum = {total: 0, success: 0, error: 0}
            this.$refs.progressBar.style.width =0
            this.$refs.progressBar.textContent =''
            pole.result=''
            pole.resultInfo = ''
            pole.opereaTime = ''
          }
        })
      },
    },
    created() {
      this.queryRegion()
      this.queryGroup()
      this.querLightInfo()
    },
    mounted() {}
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
